import React from 'react'
import { Row, Col ,Checkbox ,InputNumber ,Select ,Input} from 'antd'
import { getCorrectInputNumber } from '../../util'
import ColorPicker from 'components/ColorPicker'
import debounce from 'lodash/debounce'

const styles = require('../Workbench.less')
const Option = Select.Option
export interface RollingPlateSection {
  rowNum: number,  //表行数
  carousels: string,    //轮播方式
  waitTime: number,  //轮播时间间隔(ms)
  sort: boolean,  //自动排序	
  unit: number,   //数值单位
  height: number, //数值单位
  color: string,  //字体颜色
}

interface RollingPlateSectionProps {
  title: string
  config: RollingPlateSection
  onChange: (prop: string, value: any) => void
}
export class RollingPlateSection extends React.PureComponent<RollingPlateSectionProps, {}> {

  private debounceInputChange = null
  
  constructor (props: RollingPlateSectionProps) {
    super(props)
    this.debounceInputChange = debounce(props.onChange, 1500)
  }

  private inputChange = (prop) => (e: React.ChangeEvent<HTMLInputElement>) => {
    this.debounceInputChange(prop, e.target.value)
  }


  private checkboxChange = (prop) => (e) => {
    this.props.onChange(prop, e.target.checked)
  }

  private inputNumberChange = (prop) => (value) => {
    this.props.onChange(prop, getCorrectInputNumber(value))
  }

  private selectChange = (prop) => (value) => {
    this.props.onChange(prop, value)
  }

  private colorChange = (prop) => (color) => {
    this.props.onChange(prop, color)
  }

  public render () {
    const { title, config } = this.props
    const { rowNum ,unit ,carousels ,sort , waitTime , height, color}  = config
    const list = [ { name: '单行轮播', value: 'single' },{ name: '整页轮播', value: 'page' }]
    const carouselList = list.map((l) => (
      <Option key={l.value} value={l.value}>{l.name}</Option>
    ))

    return (
      <div className={styles.paneBlock}>
        <h4>{title}</h4>
        <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
        <Col span={4}>
          <Checkbox
            checked={sort}
            onChange={this.checkboxChange('sort')}
          />
        </Col>
        <Col span={8}>自动排序</Col>
      </Row>
        <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
        <Col span={4}>轮播方式</Col>
        <Col span={8}>
          <Select
            placeholder="样式"
            className={styles.blockElm}
            value={carousels}
            onChange={this.selectChange('carousels')}
          >
            {carouselList}
          </Select>
        </Col>
        <Col span={4}>轮播间隔</Col>
        <Col span={8}>
          <InputNumber
            placeholder="waitTime"
            className={styles.blockElm}
            value={waitTime}
            onChange={this.inputNumberChange('waitTime')}
          />
        </Col>
      </Row>
        <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
        <Col span={4}>列表行数</Col>
          <Col span={8}>
            <InputNumber
                placeholder="width"
                className={styles.blockElm}
                value={rowNum}
                onChange={this.inputNumberChange('rowNum')}
              />
          </Col>
          <Col span={4}>数值单位</Col>
          <Col span={8}>
            <Input onChange={this.inputChange('unit')} placeholder="" defaultValue={unit}/>
          </Col>
        </Row>
        <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
          <Col span={4}>布局高度</Col>
          <Col span={8}>
            <InputNumber
                placeholder="height"
                className={styles.blockElm}
                value={height}
                onChange={this.inputNumberChange('height')}
              />
          </Col>
          <Col span={4}>字体颜色</Col>
          <Col span={8}>
            <ColorPicker
                value={color}
                onChange={this.colorChange('color')}
              />
          </Col>
          </Row>
      </div>
    )
  }
}

export default RollingPlateSection
